<template>
	<view class="container">
		<view class="management">
			<view class="management-wrap">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择的类型：
						</view>
						<view class="uni-list-cell-db">
							<!-- {{array}} -->
							<picker mode="selector" @change="bindPickerChange"  value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							请输入手机号：
						</view>
						<view class="uni-form-item uni-column">
							<input class="uni-input" @input="onKeyInput" placeholder="请输入手机号码" />
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							商家名称：
						</view>
						<view class="uni-form-item uni-column">
							<view>{{shopname}}</view>
						</view>
					</view>
					<view class="uni-list-cell" v-if="type == 1">
						<view class="uni-list-cell-left">
							赠送数量：
						</view>
						<view class="uni-form-item uni-column">
							<input class="uni-input" @input="checknum" placeholder="请输入赠送数量" />
						</view>
					</view>
				</view>
			</view>
			<view class="confirm" @click="confirm">
				<view>确认转赠</view>
			</view>
		</view>
		<view class="management-details">
			<!-- <view class="management-details-tab">
				<view :class="tabindex == index ?'tabActive':'commflex'" @click="changetab(index)" v-for="(item,index) in array" :key="index">{{item.name}}</view>
			</view> -->
			<view class="management-details" v-for="(item,index) in presentedlist" :key='index'>
				<view class="list">
					<view class="commentflex1">{{item.userName}}</view>
					<view class="commentflex1">赠送数量：{{item.giveNum}}个</view>
					<view class="commentflex1">{{item.createTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: false,
				shopname: '',
				tabindex: 0,
				array: ['消费奖励'],
				presentedlist: [],
				index: 0,
				userMobile: '',
				type: '1',
				num: '',
			}
		},
		watch: {
			'userMobile': {
				handler: function(val) {
					let that = this;
					if (val.length == 11) {
						let data = {
							userPhone: that.userMobile
						}
						that.$Request.request('/api/user_center/getUserInfo', 'GET', data).then(res => {
							if (res.status == -1) {
								console.log('1')
								this.shopname = '该商家未入驻'
							} else {

								this.shopname = res.data.userName
							}
						}).catch(error => {
							console.log(error)
							this.shopname = '该商家未入驻'
						})
					} else {
						this.shopname = ''
					}
				}
			}
		},
		onLoad() {
			this.loadData()
			this.presented()
		},
		methods: {
			confirm() {
				let that = this;

				if (that.userMobile == '') {
					that.$api.msg('请输入手机号')
					return false;
				}
				let data = {
					userPhone: that.userMobile,
					type: that.type,
					num: that.num
				}
				console.log(data)
				that.$Request.request('/api/user_center/doGive', 'POST', data).then(res => {
					if (res.status == 1) {
						that.$api.msg(res.msg)
						that.presented()
					}
				}).catch(error => {

				})
			},
			presented() {
				let that = this;
				let data = {
					type: that.type
				}
				that.$Request.request('/api/user_center/giveLogs', 'GET', data).then(res => {
					if (res.status == 1) {
						that.presentedlist = res.data.list
					}
				}).catch(error => {

				})
			},
			loadData() {
				let that = this;
				// that.$Request.request('/api/user_center/getGiveItems', 'GET', ).then(res => {
				// 	this.array = res.data.list
				// 	this.isshow = true;
				// })
			},
			changetab(index) {
				this.tabindex = index;
			},
			bindPickerChange: function(e) {
				let that = this;
				this.index = e.target.value
				that.type = this.array[this.index].type;
			},
			onKeyInput(event) {
				this.userMobile = event.detail.value;
			},
			checknum(e) {
				this.num = e.detail.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.management {
		font-size: 28upx;
		padding: 20upx;
		margin-bottom: 50px;

		.management-wrap {
			margin-bottom: 20px;

			.uni-list-cell {
				display: flex;
				justify-content: space-between;
				padding: 20upx 0px;
				border-bottom: 1px solid #f2f2f2;

				.uni-list-cell-left {
					width: 250upx;
				}

				.uni-list-cell-db {
					flex: 1;
				}

				.uni-form-item {
					flex: 1;
				}
			}
		}

		.confirm {
			margin: 0 auto;
			text-align: center;
			width: 35%;
			background-color: #ff0000;
			color: #fff;
			font-size: 24upx;
			height: 50upx;
			line-height: 50upx;
			border-radius: 10upx;
		}
	}

	.management-details {
		font-size: 14px;
		padding: 10px 0px;

		.management-details-tab {
			display: flex;
			justify-content: space-between;
			height: 35px;
			line-height: 35px;
			box-shadow: 10px 10px 10px 10px #f2f2f2;
			padding: 0px 10px;

			.tabActive {
				color: #027aff;
				border-bottom: 1px solid #027aff;
				flex: 1;
				text-align: center;
			}
		}

		.management-details {
			.list {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				align-items: center;
				flex-wrap: nowrap;
				padding: 10px;

				.commentflex1 {
					flex: 1;
				}
			}
		}

		.commflex {
			flex: 1;
			text-align: center;
		}
	}
</style>
